<script setup>
import request9191 from "../../utils/request9191.js";
import {onMounted, reactive, ref} from "vue";
import axios from "axios";
const businessCounts = ref(0)
const ordersCount = ref(0)
const passDishCount = ref(0)
const getBusinessCount = () => {
  axios.get("http://localhost:8888/businessinfo/selectBusinessCount")
      .then(res => {
        businessCounts.value = res.data.total
      })
}
getBusinessCount()
const getOrdersCount = () => {
  axios.get("http://localhost:8888/restaurantorders/selectOrdersCount")
      .then(res => {
        ordersCount.value = res.data.total
      })
}
getOrdersCount()
const getPassDishCount = () => {
  axios.get("http://localhost:8888/dishes/selectDishesCount")
      .then(res => {
        passDishCount.value = res.data.total
      })
}
getPassDishCount()
const config = reactive({
  data: [97.8],
  shape: 'roundRect',
})
</script>

<template>
  <div class="clubCount">
    <div class="clubCount_main">
      <span>商家总数:   <i>{{ businessCounts }}</i></span><br>
      <span>食堂订单数:   <i>{{ ordersCount }}</i></span><br>
      <span>上架菜品数量:   <i>{{ passDishCount }}</i></span>
    </div>
    <div class="bfs">
      <dv-water-level-pond :config="config" style="width:100px;height:100px;margin-top: 40px;"/>
      <span>订单成功率</span>
    </div>
  </div>
</template>

<style scoped>
.clubCount {
  margin-left: 50px;
  color: yellow;
  width: 450px;
  height: 200px;
  display: flex;
  justify-content: space-between;
}
.clubCount_main i {
  font-size: 25px;
  color: #13ce66;
  font-weight: bolder;
}
.clubCount_main {
  line-height: 50px;
  padding-top: 20px;
}
</style>
